import { useHistory } from "react-router-dom"
import { useDispatch, useSelector } from "react-redux"
import { Button, Card, Empty, Space } from "antd"
import { useMemo, useState } from "react"

import { setCurAppAction } from "../store/actions/appDefAction"


const Home = () => {

  const history = useHistory()
  const dispatch = useDispatch()
  const appDefinitionList = useSelector(state => state.appDef.list)

  const handleClick = (url, appKey) => {
    dispatch(setCurAppAction(appKey))
    localStorage.setItem('appKey', appKey)
    history.push(url)
  }

  const myApps = useMemo(() => {
    return appDefinitionList ? appDefinitionList.filter(el => !!el.appDefinitionId) : []
  }, [appDefinitionList])


  return <div className="page-wrap">
    <Card title="我的应用" size="small">
      {
        myApps.length > 0 ?
          <Space wrap size={20}>
            {
              myApps.map(el => (
                <Card
                  key={el.appDefinitionKey}
                  title={el.name}
                  size="small"
                  hoverable
                >
                  <Space>
                    <Button
                      type="primary"
                      onClick={() => {
                        handleClick('/workflow/tasks/todo', el.appDefinitionKey)
                      }}
                    >任务</Button>
                    <Button
                      onClick={() => {
                        handleClick('/workflow/processes', el.appDefinitionKey)
                      }}
                    >流程</Button>
                  </Space>
                </Card>
              ))
            }
          </Space> :
          <div className="center-box">
            <Empty description="暂无应用"></Empty>
          </div>
      }
    </Card>
  </div>
}

export default Home